<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<%
	String path = request.getContextPath();
%>

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>SP Code Percent List</title>
	
	<script src="<%=path%>/static/js/jqueryfordatatables.js" type="text/javascript"></script>

	<script src="<spring:url value="/static/js/jquery.easyui.min.js" />" type="text/javascript" ></script>
	<link rel="stylesheet" type="text/css" href="<%=path%>/static/css/themes/default/easyui.css">
	<link href="<%=path%>/static/css/themes/icon.css" rel="stylesheet" type="text/css" />
	
	<script src="<%=path%>/static/js/jquery.dataTables.min.js" type="text/javascript"></script>
	<link href="<%=path%>/static/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
	<link href="<%=path%>/static/css/datatables.css" rel="stylesheet" type="text/css" />
	
	
	<script type="text/javascript" language="javascript" class="init">
		$(document).ready(function() {
			
		    $('#reportTable').dataTable( {
		    	"dom": '<lf<t>ip>',
		        "scrollY": "380px",
		        "scrollX": true,
		        "paging": true,
		        "pagingType": "full_numbers",

		        "ajax": {
		            "url": "appInitReportData",
		            "type": "POST",
		            "data": function ( d ) {
		                d.startDate = $('#startDate').datebox('getValue');
		                d.endDate = $('#endDate').datebox('getValue');
		                d.provider = $('#provider').combobox('getText');
		                d.province = $('#province').combobox('getText');
		            },
		            
		            "dataSrc": "rows"
		        },
		        "columns": [
		                    { "data": "createTime" },
		                    { "data": "cpName" },
		                    { "data": "appName" },
		                    { "data": "channelName" },
		                    { "data": "provider" },
		                    { "data": "province" },
		                    { "data": "addUser" },
		                    { "data": "activeUser" },
		                    { "data": "totalUser" }
		                ],
		        initComplete: function () {
		            this.api().columns().every( function () {
		                var column = this;
		                var select = $('<select><option value="">All</option></select>')
		                    .appendTo( $(column.header()).empty() )
		                    .on( 'change', function () {
		                        var val = $.fn.dataTable.util.escapeRegex(
		                            $(this).val()
		                        );
		 
		                        column
		                            .search( val ? '^'+val+'$' : '', true, false )
		                            .draw();
		                    } );
		 
		                column.data().unique().sort().each( function ( d, j ) {
		                    select.append( '<option value="'+d+'">'+d+'</option>' )
		                } );
		            } );
		        }
		    } );
		    
	        var lastIdx = null;
	        var table = $('#reportTable').DataTable();
	        $('#reportTable tbody').on( 'mouseover', 'td', function () {
	            var colIdx = table.cell(this).index().column;
	 
	            if ( colIdx !== lastIdx ) {
	                $( table.cells().nodes() ).removeClass( 'highlight' );
	                $( table.column( colIdx ).nodes() ).addClass( 'highlight' );
	            }
	        } ).on( 'mouseleave', function () {
	            $( table.cells().nodes() ).removeClass( 'highlight' );
	        } );
	        
		} );
		
		
	    function dateformatter(date){
	        var y = date.getFullYear();
	        var m = date.getMonth()+1;
	        var d = date.getDate();
	        return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
	    }
		
		function searchInfo() {
	    	var startDate = $('#startDate').datebox('getValue');
	    	var endDate = $('#endDate').datebox('getValue');
	    	if(startDate != '' && endDate != '') {
	    		if (Date.parse(startDate) > Date.parse(endDate)) {
	    			alert("起始时间不能大于截止时间");
	    			return;
	    		}
	    	}
	    	$('#reportTable').DataTable().ajax.reload();
		}
	    
	</script>

</head>

<body class="easyui-layout" style="height: 100%">
		<div data-options="region:'north'" 
			style="padding: 1px 0 1px 1px; height: 80px; background-color: #F1F4F9;"
			title="Search">
			<form id="queryForm" style="margin:5;text-align: center;">
			<table width="100%">
				<tr>
					<td>
						<span style="font-size: 14px">起始日期：</span>&nbsp;
						<input class="easyui-datebox" data-options="formatter:dateformatter" id="startDate" name="startDate" style="width: 150">&nbsp;
					</td>
					<td>
						<span style="font-size: 14px">截止日期：</span>&nbsp;
						<input class="easyui-datebox" data-options="formatter:dateformatter" id="endDate" name="endDate" style="width: 150">&nbsp;
					</td>

					<td>
						运营商 &nbsp;&nbsp;&nbsp;&nbsp;<input class="easyui-combobox" 
							name="provider" id="provider"
							data-options="
									url:'<%=path%>/spcodepercent/spCodePercentproviderIDListAll',
									method:'get',
									valueField:'name',
									textField:'name',
									hasDownArrow :true,
									panelHeight:'auto'
							">
					</td>
					<td>
						省份 &nbsp;&nbsp;&nbsp;&nbsp;<input class="easyui-combobox" 
							name="province" id="province"
							data-options="
									url:'<%=path%>/spcodepercent/spCodePercentprovinceCodeListAll',
									method:'get',
									valueField:'name',
									textField:'name',
									hasDownArrow :true,
									panelHeight:'200'
							">
					</td>
					<td>
						<a href="#" onclick="searchInfo();" class="easyui-linkbutton" iconCls="icon-search"><div style="width: 30px;float: left;">查询</div></a>
					</td>
				</tr>
			</table>
			</form>
		</div>
<div id="abc"></div>

	<div class="container" style="padding: 100px 0 1px 1px;background-color: #E0ECFF;">
	<section>
	<table id="reportTable" class="display" cellspacing="0" width="100%" >
        <thead>
            <tr>
                <th>日期</th>
                <th>CP名称</th>
                <th>游戏名称</th>
                <th>渠道名称</th>
                <th>运营商</th>
                <th>省份</th>
                <th>新增用户</th>
                <th>活跃用户</th>
                <th>累计用户</th>
            </tr>
        </thead>
        <thead>
            <tr>
                <th>日期</th>
                <th>CP名称</th>
                <th>游戏名称</th>
                <th>渠道名称</th>
                <th>运营商</th>
                <th>省份</th>
                <th>新增用户</th>
                <th>活跃用户</th>
                <th>累计用户</th>
            </tr>
        </thead>
    </table>

		</section>
	</div>

</body>
<script>
//$("#abc").replaceWith($("#tfoothidden"));
//$("#abc").replaceWith("#tfoothidden");
//$("#tfoothidden").replaceWith($("#abc"));

//alert($("#tfoothidden").html());
//$(".tfootshow").html($("#tfoothidden").html());
//$("#tfoothidden").html("");
//alert(1);
</script>

</html>